<template>
	<view class="score">
		<dwu-score-navbar title="综合评分"></dwu-score-navbar>
		<view class="score-title">
			当前评分
		</view>
		<view class="score-box">
			<image class="score-bg" src="@/static/score/score_bg1.png" mode=""></image>
			<view class="box-title">
				当前共获得{{scoreInfo.orderPJCount || 0}}人评分
			</view>
			<view class="score-number">
				<image src="@/static/score/number_bg.png" mode=""></image>
				<text>{{scoreInfo.PF || 0}}</text>
			</view>
			<view class="score-charts">
				<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bmy: 0,
				my: 0,
				fcmy: 0,
				scoreInfo: {},
				chartData: {
					series: [{
						data: [{
							"name": "不满意0分",
							"value": 0
						}, {
							"name": "满意5分",
							"value": 0
						}, {
							"name": "非常满意10分",
							"value": 0
						}]
					}]
				},
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#CCCCCC", "#6D6D6D", "#E4FF88"],
					padding: [20, 20, 5, 5],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "收益率",
						fontSize: 15,
						color: "transparent"
					},
					subtitle: {
						name: "70%",
						fontSize: 25,
						color: "transparent"
					},
					extra: {
						ring: {
							ringWidth: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "transparent",
							centerColor: "#3d3d3d"
						}
					},
				}
			};
		},
		onLoad() {
			// this.getScore()
			this.getZhmark()
		},
		methods: {
			getZhmark() {
				this.request.http('/user/zhmark', 'post').then(res => {
					let data = res.data
					console.log(data.data);
					if (data.code == 1) {
						this.scoreInfo = data.data
						let datas = [{
							// "name": `不满意${this.bmy}分`,
							"name": "不满意0分",
							"value": data.data.orderPJCountBmy
						}, {
							// "name": `满意${this.my}分`,
							"name": "满意5分",
							"value": data.data.orderPJCountMy
						}, {
							// "name": `非常满意${this.fcmy}分`,
							"name": "非常满意10分",
							"value": data.data.orderPJCountFcmy
						}]
						this.chartData.series[0].data = datas
					}
				})
			},
			getScore() {
				this.request.http('/user/zhmark', 'post').then(res => {
					let data = res.data
					console.log(data.data);
					if (data.code == 1) {
						// this.bmy = data.data.bmy
						// this.my = data.data.my
						// this.fcmy = data.data.fcmy
						// this.getZhmark()
					}
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #F7F9F9;
	}

	.score {
		.score-title {
			padding: 46rpx 0 24rpx 40rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 27rpx;
			color: #474747;
			line-height: 38rpx;
		}

		.score-box {
			margin: 0 auto;
			position: relative;
			width: 700rpx;
			height: 466rpx;
			// display: flex;
			// align-items: center;
			// justify-content: space-between;
			// padding-left: 146rpx;
			// padding-right: 46rpx;

			.score-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
			}

			.box-title {
				position: relative;
				z-index: 10;
				padding-left: 42rpx;
				padding-top: 14rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #7B7B7B;
			}

			.score-number {
				position: absolute;
				top: -22rpx;
				right: 34rpx;
				width: 184rpx;
				height: 182rpx;
				z-index: 10;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
				}

				text {
					position: relative;
					z-index: 10;
					top: -4rpx;
					font-family: DINAlternate, DINAlternate;
					font-weight: bold;
					font-size: 69rpx;
					color: #4C4C4C;
					// line-height: 81rpx;
					text-shadow: inset 0px 2px 6px rgba(131, 82, 45, 0.5);
				}
			}

			.score-charts {
				padding-top: 22rpx;
				position: relative;
				z-index: 10;
				height: 384rpx;
			}
		}
	}
</style>